<template>
  <render v-bind="props"></render>
</template>
<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import { TextNode } from '../util'
import HighlightNode from './HighlightNode.vue'
type PROPS = { data: TextNode['rich'] }
const props = withDefaults(defineProps<PROPS>(), {})
const render = (props: PROPS) => {
  const { data } = props
  const { type, text, jump_url, rid } = data || {}
  const style = data?.style || {}
  switch (type) {
    case 'RICH_TEXT_NODE_TYPE_WEB':
      return h(HighlightNode, {
        type: 'link',
        text: text || '',
        url: jump_url || '',
        tag: 'a',
        customStyle: style,
      })
    case 'RICH_TEXT_NODE_TYPE_TOPIC':
      return h(HighlightNode, {
        type: 'topic',
        text: text || '',
        url: jump_url || '',
        tag: 'a',
        customStyle: style,
      })
    default:
      return h('span', text)
  }
}
</script>
<style lang="scss" scoped></style>
